<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>图书借阅排行榜</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="/js/jquery-3.6.4.js"></script>
    <style>
        body {
            background-color: #f5f5f5;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            padding: 20px;
        }
        .container-fluid {
            background-color: #fff;
            border-radius: 8px;
            padding: 30px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            margin: auto;
            max-width: 1200px;
        }
        h1 {
            text-align: center;
            color: #333;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            font-size: 16px;
        }
        th, td {
            padding: 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #f7f7f7;
        }
        .table-hover tbody tr:hover {
            background-color: #eaeaea;
        }
        .img-thumbnail {
            max-width: 100px; /* 限制封面图片大小 */
        }
        .borrow-btn {
            color: #fff;
            background-color: #007bff;
            border: none;
            border-radius: 4px;
            padding: 5px 10px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .borrow-btn:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <h1>图书借阅排行榜</h1>
    <table class="table table-hover">
        <thead>
        <tr>
            <th>封面</th>
            <th>书名</th>
            <th>作者</th>
            <th>库存</th>
            <th>借出次数</th>
            <th>描述</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <!-- 借阅排行榜将通过AJAX动态加载 -->
        </tbody>
    </table>
</div>

<script>
    $(document).ready(function() {
        // 加载和显示借阅排行榜
        function loadBorrowRank() {
            $.ajax({
                url: '/api/v1/books/borrow-rank',
                type: 'GET',
                success: function(books) {
                    var table = $('table.table-hover > tbody');
                    table.empty(); // 清空原有数据
                    $.each(books, function(index, book) {
                        table.append(
                            '<tr>' +
                            '<td><img src="' + book.bookPhoto + '" alt="封面" class="img-fluid img-thumbnail" style="max-width: 100px;"></td>' +
                            '<td>' + book.bookName + '</td>' +
                            '<td>' + book.author + '</td>' +
                            '<td>' + book.totalStock + '</td>' +
                            '<td>' + book.borrowedCount + '</td>' +
                            '<td>' + book.description + '</td>' +
                            '<td><button class="borrow-btn" data-id="' + book.id + '">借书</button></td>' +
                            '</tr>'
                        );
                    });
                },
                error: function() {
                    alert('无法加载借阅排行榜');
                }
            });
        }
        $('.table-hover').on('click', '.borrow-btn', function() {
            var bookId = $(this).data('id');

            var urlParams = new URLSearchParams(window.location.search);
            var userId = urlParams.get('id');

            // 发送AJAX POST请求以借书
            $.ajax({
                url: '/api/v1/books/' + bookId + '/borrow',
                type: 'POST',
                data: { userId: userId },
                success: function(response) {
                    alert('借书成功');
                    // 刷新借阅排行榜以显示更新的借出次数
                    loadBorrowRank();
                },
                error: function(xhr) {
                    alert('借书失败: ' + xhr.responseText);
                }
            });
        });


        loadBorrowRank(); // 初始化加载借阅排行榜
    });
</script>
</body>
</html>